<template>
  <div class="addOrder">
    <el-dialog
      :title="addfromdata.id ? '编辑' : '新增'"
      :visible.sync="dialogVisiblefrom"
      width="60%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col>
          <el-row>
            <el-col>
              <span>
                店铺名称
              </span>
              <el-input v-model="addfromdata.clientname" placeholder="请输入内容" size="medium" />
            </el-col>
            <el-col>
              <span>
                选择用户
              </span>
              <el-select
                v-model="addfromdata.consignee"
                filterable
                placeholder="请选择"
                :filter-method="addconsignee"
              >
                <el-option
                  v-for="item in consignee"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <span>
                配送方式
              </span>
              <el-select v-model="addfromdata.distribution" filterable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-col>
            <el-col>
              <span>
                状态
              </span>
              <el-select v-model="addfromdata.state" filterable placeholder="请选择" class="sterid">
                <el-option
                  v-for="item in ptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <span>
                配送地址
              </span>
              <el-input
                v-model="addfromdata.commoditylist"
                placeholder="请输入配送地址"
                class="inputfrom"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <span>
                联系方式
              </span>
              <el-input v-model="addfromdata.phone" placeholder="请输入店铺名称" maxlength="11" />
            </el-col>
            <el-col>
              <span>
                活动优惠
              </span>
              <el-select v-model="addfromdata.discounts" filterable placeholder="请选择">
                <el-option
                  v-for="item in optitel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <span>
                包装
              </span>
              <el-input
                v-model="addfromdata.packaging"
                placeholder="请输入店铺名称"
                class="sterid"
              />
            </el-col>
            <el-col>
              <span class="steridrigth">
                优惠卷
              </span>
              <el-select v-model="addfromdata.discountsticket" filterable placeholder="请选择">
                <el-option
                  v-for="item in optitelarr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <span class="steridrigth">
                配送费
              </span>
              <el-input v-model="addfromdata.distributioncost" placeholder="请输入内容" />
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-row>
            <h2>选择商品</h2>
          </el-row>
          <el-row>
            <el-table
              ref="multipleTable"
              :data="tableDataTo"
              tooltip-effect="dark"
              style="width: 100%;"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="商品编号" width="120" prop="ordernumber" />
              <el-table-column prop="clientname" label="商品名" width="120" />
              <el-table-column prop="commodityname" label="所属店铺" show-overflow-tooltip />
              <el-table-column prop="commdityimage" label="商品图" show-overflow-tooltip>
                <template #default="{row}">
                  <img :src="row.commdityimage" alt="">
                </template>
              </el-table-column>
              <el-table-column prop="ordermoney" label="销售价" />
              <el-table-column prop="discounts" label="参与活动" />
            </el-table>
          </el-row>
          <el-row>
            <el-col>
              <h2>统计￥{{ totalPrice }}</h2>
            </el-col>
            <el-col>
              <el-pagination
                background
                :current-page="qureInfoPage._page"
                :page-sizes="[1, 2, 5, 7]"
                :page-size="qureInfoPage._limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <h2>合计</h2>
            </el-col>
            <el-col>
              <h1 class="curmmi">{{ addfromdata.ordermoney }}</h1>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:dialogVisiblefrom', false)">取 消</el-button>
        <el-button type="primary" @click="cancel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderPage, EditOrderQuery, addOrderQuery } from '@/api/table';
export default {
  name: 'AddOrder',
  props: {
    dialogVisiblefrom: {
      type: Boolean,
      default: false,
    },
    addfromdata: {
      type: Object,
      required: true,
    },
    consignee: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      tableDataTo: [],
      qureInfoPage: {
        _page: 1, // 当前页码值
        _limit: 7, // 每页显示条数
      },
      totalPrice: 0, // 统计价格
      //   curmmi: 0, // 总价格
      total: 5,
      //   fromdataTabel: {
      //     clientname: '', // 商户名称
      //     distribution: '', // 配送方式
      //     consignee: '', // 收获人
      //     state: '', // 状态
      //     commoditylist: '', // 配送地址
      //     phone: '', // 联系方式
      //     discounts: '', // 活动优惠
      //     packaging: '', // 包装
      //     discountsticket: '', // 优惠券
      //     distributioncost: '', // 配送费
      //   },
      ptions: [
        {
          value: '选项1',
          label: '未支付',
        },
        {
          value: '选项2',
          label: '待支付',
        },
      ],
      options: [
        {
          value: '选项1',
          label: '到店自提',
        },
        {
          value: '选项2',
          label: '送货上门',
        },
      ],
      optitel: [
        {
          value: '选项1',
          label: '￥2 满50-2',
        },
      ],
      optitelarr: [
        {
          value: '选项1',
          label: 2,
        },
        {
          value: '选项2',
          label: 2,
        },
      ],
      multipleSelection: [], // 勾选中的数据
      isEmpty: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getOrderPage();
  },
  methods: {
    addconsignee(v) {
      //   console.log('321212');
      this.addfromdata.consignee = v;
    },
    handleSelectionChange(val) {
      this.totalPrice = 0;
      this.multipleSelection = val;
      // console.log(val, '////');
      // const arr = [];
      // console.log(this.multipleSelection);
      //   console.log(this.multipleSelection.length);
      this.multipleSelection.forEach((item) => {
        this.totalPrice += item.ordermoney.substr(0, item.ordermoney.length - 1) - 0;
      });
      this.addfromdata.ordermoney = this.totalPrice - this.multipleSelection.length * 5 + '￥';
      //   console.log(this.curmmi);
    },
    async getOrderPage() {
      const data = await getOrderPage(this.qureInfoPage);
      this.tableDataTo = data.data;
      //   console.log(this.tableDataTo);
      this.total = data.headers['x-total-count'] - 0;
    },
    handleClose() {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.$emit('update:dialogVisiblefrom', false);
        })
        .catch((_) => {});
    },
    async cancel() {
      // 判断对象内容是否为空
      let isEmpty = false;
      Object.keys(this.addfromdata).forEach((x) => {
        if (this.addfromdata[x] !== '') {
          console.log(this.addfromdata);
          isEmpty = true;
        }
      });
      if (isEmpty) {
        console.log('没有为空的值');
        if (this.addfromdata.id) {
          await EditOrderQuery(this.addfromdata);
          this.$message.success('修改订单成功');
        } else {
          const { data } = await addOrderQuery(this.addfromdata);
          this.$message.success('添加订单成功');
          console.log(data);
        }
        //   console.log(this.addfromdata);
        //   console.log(data, '修改成功');
        this.$message.success('数据没有填写完整');
        this.$emit('getOrderPage');
        this.$emit('update:dialogVisiblefrom', false);
      }
    },
    handleSizeChange(val) {
      this.qureInfoPage._limit = val;
      console.log(val, '每页显示条数');
      this.getOrderPage();
    },
    handleCurrentChange(val) {
      this.qureInfoPage._page = val;
      console.log(val, '当前页码值');
      this.getOrderPage();
    },
  },
};
</script>

<style lang="less" scoped>
.addOrder {
  .el-row {
    border-top: 1px solid #ccc;
    .el-col {
      .el-row {
        border: 0;
        display: flex;
        margin: 25px 0;
        .totalPrice {
          color: #fa541c;
        }
        ::v-deep .el-table__header-wrapper {
          border: 1px solid #ccc;
        }
        .el-col {
          display: flex;
          align-items: center;
          span {
            font-weight: normal;
            margin-right: 10px;
          }
          .curmmi {
            font-size: 40px;
            color: #fa541c;
          }
          .el-select {
            width: 154px;
          }
          .el-input {
            width: 154px;
          }
          .inputfrom {
            width: 72%;
          }
          .sterid {
            margin-left: 28px;
          }
          .steridrigth {
            margin-right: 24px;
          }
        }
      }
    }
  }
  ::v-deep .el-dialog__footer {
    border-top: 2px solid #ccc;
  }
}
</style>
